<template lang="html">
  <!-- gotoRouter:点击后路由跳转到与id名相同的route.name所对应的路径 -->
  <footer class="footer" @click.stop='gotoRouter'>
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="/">
        <i slot="icon" class="icon-index"></i>
        首页
      </mt-tab-item>
      <mt-tab-item id="/category">
        <i slot="icon" class="icon-category"></i>
        活动
      </mt-tab-item>
      <mt-tab-item id="/car">
        <i slot="icon" class="icon-car"></i>
        购物车
      </mt-tab-item>
      <mt-tab-item id="/user">
        <i slot="icon" class="icon-user"></i>
        我的
      </mt-tab-item>
    </mt-tabbar>
  </footer>
</template>

<script>
export default {
  methods: {
    gotoRouter() {
      console.log(this.selected)
      this.$router.push({
        path: this.selected
      })
    }
  },
  data() {
    return {
      selected: '/'
    }
  },
  mounted() {
    //获取当前路由名称，根据该名称给当前footer添加is-selected
    console.log(this.$route)
    this.selected = this.$route.path;
  }
}
</script>

<style lang="less" scoped>
@import '../assets/fz.less';
@import '../assets/index/style.css';

.mint-tab-item-label:hover {
  color: #333;
}

.footer {
  .mint-tabbar {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 0 2.2vw 0 hsla(0, 6%, 50%, .13);
    -webkit-box-shadow: 0 0 2.2vw 0 hsla(0, 6%, 50%, .13);

    .is-selected {
      color: #048AB9;
      background-color: #fff;

      i {
        &::before {
          color: #048AB9;
        }
      }
    }

    i {
      .fz(font-size, 42);
    }
  }
}
</style>
